<template>
    <div class="search">
        <!-- 搜索的头部模块 -->
        <div class="head">
            <div><i class="iconfont icon-xitongfanhui" @click="$router.go(-1)"></i></div>
            <div class="indiv">
              <input type="text" v-model="serval" class="inp" :placeholder="historylist[0]">
              <van-icon name="cross" class="closesty" @click="clear" />
            </div>
        </div>
        <!-- 搜索的内容 -->
        <div class="searchmain" v-if="searchlist.length > 0 ">
            <ul>
              <li v-for="item in  searchlist" :key="">
                <van-icon name="search" class="searchicon" />
                <span class="textbox"> {{ item.keyword }}</span>

              </li>
            </ul>
        </div>
        
        <!-- 搜索历史 -->
        <div class="history" v-if="historylist.length > 0 && searchlist.length == 0 ">
            <div style="white-space:nowrap">历史</div>
            <div class="historylist">
                <span v-for="item in historylist" class="hisitem" @click="serval = item">{{ item }}</span>
            </div>
            <div class="delete" @click="deletehis">
                <van-icon name="delete-o" />
            </div>
            
        </div>
    </div>
</template>

<script>
import { search} from 'api/search/index.js'

export default {
    name:'',
    data() {
        return {
            serval: '',
            // 搜索的列表
            searchlist: [],
            // 搜索的历史记录
            historylist: JSON.parse( sessionStorage.getItem('hisrecord') ) || []
        };
    },
    watch:{
      // 监听  serval发生变化
      serval(newval){
        this.serachs()
      }
    },
    methods:{
      // 搜索歌曲的名字 展示搜索的歌曲  并把搜索记录保存在sessionStprage中
      serachs(){
        search({
          keywords: this.serval,
          type: 'mobile'
        }).then(res => {
          console.log(res)
          if( res.code != 200 || res.result.length == 0 ){
            return
          }
          this.searchlist = res.result.allMatch

          this.historylist.push(this.serval)

          sessionStorage.setItem('hisrecord',JSON.stringify( this.historylist) )
        })
      },
      // 清除input框的内容 并且 清空搜索的列表
      clear(){
        this.serval = ''
        this.searchlist = []
      },
      // 清空历史记录
      deletehis(){
          this.historylist = []
          sessionStorage.setItem('hisrecord',JSON.stringify( this.historylist) )
      }
    }

};
</script>

<style scoped lang="scss">
.search{
  padding: 0rem .1rem;
  .head{
    display: flex;
    align-items: center;
    height: .5rem;
    .icon-xitongfanhui{
      font-size: .25rem;
      margin-right: .1rem;
    }
    .indiv{
      flex: 1;
      position: relative;
      .inp{
        width: 100%;
        border: none;
        height: .3rem;
        border-bottom: 1px solid #000;
      }
      .closesty{
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
      }
    }
    
  }

  .searchmain{
    li{
      border-bottom: 1px solid #eee;
      padding: .1rem 0rem;
      
    }
  }



  .history{
    display: flex;
    align-items: center;
    margin: .1rem 0rem;
    .historylist::-webkit-scrollbar {
      display: none;
    }
    .historylist{
      flex: 1;
      display: flex;
      overflow: hidden;
      overflow-x: scroll; 
      .hisitem{
        padding: .05rem;
        background-color: #eee;
        margin: 0rem .1rem;
        border-radius: .2rem;
        white-space: nowrap;
      }
    }
    .delete{
      margin-left: .1rem;
      font-size: .2rem;
    }

  }
}

</style>
